
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	body,ul{margin: 0;padding: 0;}
	li {list-style: none;}
	div{width:700px; height: 460px; background-color: #45dfff; margin: 50px auto; text-align: center;position: relative;}
	#wrap img{border: none; vertical-align: top;width: 600px;height: 350px;margin-top: 40px;}
	#wrap span {display:block; width: 40px;height: 40px; border-radius: 20px;background-color: yellow; text-align: center;line-height: 40px;font-size: 36px; color: #fff; font-weight: bold;position: absolute;top:210px; opacity: 0.6; filter:alpha(opacity=60); cursor: pointer;}
	#left{left:20px;}
	#right{right:20px;}
	#list{position: absolute;bottom: 20px;left:50%; margin-left: -70px;}
	#list li{width: 20px;height: 20px; border-radius:10px;background-color: #999;float: left;margin-right: 20px;cursor: pointer;}
	#list li:last-child{margin-right:0 !important;}
	#pic {position: absolute;bottom: 100px;left:200px;position: absolute; bottom: 50px; left: 50%;margin-left: -90px;}
	#pic li{float: left;}
	#pic img{width: 50px;height:50px;margin-right: -6px; visibility: hidden;}
	#pic img{margin-right: 0 !important;}
</style>
<script type="text/javascript">
window.onload = function (){
	function $(id,tag){
		if (tag) {
			return document.getElementById(id).getElementsByTagName(tag);
		} else{
			return document.getElementById(id);
		};
	}

	var aSpan = $('wrap','span');
	var oImg =$('wrap','img')[0];
	var arrUrl = ['1.jpg','2.jpg','3.jpg','4.jpg'];
	var num = 0;


	//初始化
	oImg.src = arrUrl[num];

	for (var i = 0; i < arrUrl.length; i++) {
		$('list').innerHTML += '<li></li>';
	};
	$('list','li')[num].style.backgroundColor = 'yellow';

	for (var i = 0; i < arrUrl.length; i++) {
		$('pic').innerHTML += '<li>' + '<img src="'+ arrUrl[i] +'" alt="">' + '</li>' 
	};

	//鼠标移入让左右切换键件清晰
	for (var i = 0; i < aSpan.length; i++) {
		aSpan[i].onmouseover = function (){
			this.style.opacity = '100';
			//this.style.cssText = 'filter:alpha(opacity = 100);opacity: 100';
		}

		aSpan[i].onmouseout = function (){
			this.style.opacity = '0.6';
			//this.style.cssText = 'filter:alpha(opacity = 60);opacity: 60';  		//发现在chrome下，无法实现
		}
	};

	//是让小圆点变黄的函数
	function aLiColor(obj){
		for (var i = 0; i < aLi.length; i++) {
			aLi[i].style.backgroundColor = '#999';
		};
		obj.style.backgroundColor = 'yellow';
	}

	//下一张
	aSpan[1].onclick = function (){
		num ++;
		if (num == arrUrl.length) num = 0;
		oImg.src = arrUrl[num];
		
		aLiColor(aLi[num]);								//左右切换带动圆点切换
	}

	//上一张
	aSpan[0].onclick = function (){
		num --;
		if (num == -1) num = arrUrl.length-1;
		oImg.src = arrUrl[num];

		aLiColor(aLi[num]);								//左右切换带动圆点切换
	}

	//小圆点切换
	var aLi = $('list','li');
	var aImg = $('pic','img');

	for (var i = 0; i < aLi.length; i++) {
		aLi[i].index = i;
		aLi[i].onclick = function (){
			oImg.src = arrUrl[this.index];

			aLiColor(this);
			return num = this.index;						//把num值返回回去，这也左右切换事件可以从当前处开始切换(重点)
		}
	
		//略缩图
		aLi[i].onmouseover = function (){
			aImg[this.index].style.visibility = 'visible';	//用display会一直出现再第一个圆圈上头
		}
		aLi[i].onmouseout = function(){
			aImg[this.index].style.visibility = 'hidden';
		}
	};

}
	
</script>
<body>
<div id="wrap">
	<img src="" alt="">
	<span id="left">&lt;</span>
	<span id="right">&gt;</span>
<ul id="list"></ul>
<ul id="pic"></ul>
</div>

</body>
</html>